<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/%E6%AD%A6%E6%B1%8932x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/%E6%AD%A6%E6%B1%8916x16.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib1/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib1/pace/pace-theme-center-simple.min.css">
  <script src="/lib1/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="状态管理rax-app 内置了状态管理方案，并在此基础上进一步遵循 “约定优于配置” 原则，进行抽象和封装，使得状态管理变得非常容易。 注意： 如果开发者没有依照约定的目录结构创建 store，框架将不会注入任何状态管理相关的能力。 全局状态约定全局状态位于 src&#x2F;models 目录，目录结构如下： 123456src├── models               &#x2F;&#x2F; 全">
<meta property="og:type" content="article">
<meta property="og:title" content="Rax小程序进阶">
<meta property="og:url" content="http://example.com/2021/11/26/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88%E5%88%9D%E5%AD%A6/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/index.html">
<meta property="og:site_name" content="Technological Blog">
<meta property="og:description" content="状态管理rax-app 内置了状态管理方案，并在此基础上进一步遵循 “约定优于配置” 原则，进行抽象和封装，使得状态管理变得非常容易。 注意： 如果开发者没有依照约定的目录结构创建 store，框架将不会注入任何状态管理相关的能力。 全局状态约定全局状态位于 src&#x2F;models 目录，目录结构如下： 123456src├── models               &#x2F;&#x2F; 全">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01E4U8DB1oD4FkWX7uI_!!6000000005190-2-tps-1260-636.png">
<meta property="og:image" content="http://example.com/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN011tJwWL1JgbjzafvLy_!!6000000001058-2-tps-981-326.png">
<meta property="og:image" content="http://example.com/image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01wjvOdw1Dxen4lhCWL_!!6000000000283-2-tps-1504-744.png">
<meta property="og:image" content="http://example.com/image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01p5yWTF1sL5gLI6oZk_!!6000000005749-2-tps-1708-909.png">
<meta property="og:image" content="http://example.com/image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01BtOvXs2ALhIA1nL5B_!!6000000008187-2-tps-611-220.png">
<meta property="og:image" content="http://example.com/image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN011zCh3C1fSKwiHyaQ9_!!6000000004005-2-tps-1504-682.png">
<meta property="article:published_time" content="2021-11-26T04:18:39.000Z">
<meta property="article:modified_time" content="2021-11-24T07:57:54.882Z">
<meta property="article:author" content="Li Yudong">
<meta property="article:tag" content="公司技术栈">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01E4U8DB1oD4FkWX7uI_!!6000000005190-2-tps-1260-636.png">

<link rel="canonical" href="http://example.com/2021/11/26/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88%E5%88%9D%E5%AD%A6/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>Rax小程序进阶 | Technological Blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Technological Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">IT小白的成长之旅</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="tags fa-fw"></i>标签<span class="badge">18</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="th fa-fw"></i>分类<span class="badge">14</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="archive fa-fw"></i>归档<span class="badge">95</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

  <a href="https://github.com/tiarmor1" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/11/26/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88%E5%88%9D%E5%AD%A6/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/author.jpg">
      <meta itemprop="name" content="Li Yudong">
      <meta itemprop="description" content="">
    </span>
    
    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Technological Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Rax小程序进阶
        </h1>
    
        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
    
              <time title="创建时间：2021-11-26 12:18:39" itemprop="dateCreated datePublished" datetime="2021-11-26T12:18:39+08:00">2021-11-26</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-11-24 15:57:54" itemprop="dateModified" datetime="2021-11-24T15:57:54+08:00">2021-11-24</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">盒马技术栈</span></a>
                </span>
            </span>
    
          
    
        </div>
      </header>
    
    
    
    
    <div class="post-body" itemprop="articleBody">
    
      
        <h1 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h1><p>rax-app 内置了状态管理方案，并在此基础上进一步遵循 <strong>“约定优于配置”</strong> 原则，进行抽象和封装，使得状态管理变得非常容易。</p>
<p><strong>注意：</strong> 如果开发者没有依照约定的目录结构创建 <code>store</code>，框架将不会注入任何状态管理相关的能力。</p>
<h2 id="全局状态"><a href="#全局状态" class="headerlink" title="全局状态"></a>全局状态</h2><p>约定全局状态位于 <code>src/models</code> 目录，目录结构如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">src</span><br><span class="line">├── models               &#x2F;&#x2F; 全局状态</span><br><span class="line">|   ├── counter.ts</span><br><span class="line">│   └── user.ts</span><br><span class="line">├── app.tsx </span><br><span class="line">└── store.ts</span><br></pre></td></tr></table></figure>

<h3 id="定义模型"><a href="#定义模型" class="headerlink" title="定义模型"></a>定义模型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/models/user.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> delay = <span class="function">(<span class="params">time</span>) =&gt;</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> resolve(), time));</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 定义 model 的初始 state</span></span><br><span class="line">  state: &#123;</span><br><span class="line">    name: <span class="string">''</span>,</span><br><span class="line">    id: <span class="string">''</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 定义改变该模型状态的纯函数</span></span><br><span class="line">  reducers: &#123;</span><br><span class="line">    update (prevState, payload) &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        ...prevState,</span><br><span class="line">        ...payload,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 定义处理该模型副作用的函数</span></span><br><span class="line">  effects: <span class="function">(<span class="params">dispatch</span>) =&gt;</span> (&#123;</span><br><span class="line">    <span class="keyword">async</span> updateUserInfo () &#123;</span><br><span class="line">      <span class="keyword">await</span> delay(<span class="number">1000</span>);</span><br><span class="line">      dispatch.user.update(&#123;</span><br><span class="line">        name: <span class="string">'taobao'</span>,</span><br><span class="line">        id: <span class="string">'123'</span>,</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;),</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="创建-Store-实例"><a href="#创建-Store-实例" class="headerlink" title="创建 Store 实例"></a>创建 Store 实例</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/store.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">'rax-app'</span>;</span><br><span class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">'./models/user'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = createStore(&#123; user &#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store;</span><br></pre></td></tr></table></figure>

<h3 id="在-View-中使用状态"><a href="#在-View-中使用状态" class="headerlink" title="在 View 中使用状态"></a>在 View 中使用状态</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 引用全局状态</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'@/store'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> HomePage = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> [userState, userDispatchers] = store.useModel(<span class="string">'user'</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;&gt;</span><br><span class="line">      &lt;span&gt;&#123;userState.id&#125;&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">      &lt;span&gt;&#123;userState.name&#125;&lt;/</span>span&gt;</span><br><span class="line">    &lt;<span class="regexp">/&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="模型规范"><a href="#模型规范" class="headerlink" title="模型规范"></a>模型规范</h2><p>参考 MPA 状态管理模型规范</p>
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><p>参考 MPA 状态管理 API</p>
<h2 id="类型提示"><a href="#类型提示" class="headerlink" title="类型提示"></a>类型提示</h2><p>参考 MPA 状态管理类型提示</p>
<h2 id="设置初始状态"><a href="#设置初始状态" class="headerlink" title="设置初始状态"></a>设置初始状态</h2><p>通过全局的 <code>store.initialStates</code> 即可同步设置整个应用的全局状态：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; runApp &#125; <span class="keyword">from</span> <span class="string">'rax-app'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> appConfig = &#123;</span><br><span class="line">  app: &#123;&#125;,</span><br><span class="line">  store: &#123;</span><br><span class="line">+    initialStates: &#123;</span><br><span class="line">+      <span class="comment">// 这里的 key 即对应 model 名称</span></span><br><span class="line">+      user: &#123;</span><br><span class="line">+        id: <span class="string">'123'</span></span><br><span class="line">+      &#125;</span><br><span class="line">+    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">runApp(appConfig);</span><br></pre></td></tr></table></figure>

<h1 id="使用编译时组件"><a href="#使用编译时组件" class="headerlink" title="使用编译时组件"></a>使用编译时组件</h1><p>目前，Rax 小程序应用默认采用运行时方案开发，这也是我们推荐的开发方式。编译时方案由于存在一定的语法限制，会导致开发效率的降低。同时其工程方案基于 Webpack 自建，无法完全复用 Rax 的工程能力，存在诸多不便，因此不做推荐应用开发使用。但是，组件开发从业务逻辑到工程配置都相对简单，比较适合采用编译时方案开发，也能弥补在某些局部场景下性能略差的问题。因此，Rax 支持了在一个项目中同时使用运行时引擎和编译时引擎，即在运行时的小程序应用中，支持将某些性能要求较高的组件通过编译时引擎编译产出使用。</p>
<h2 id="源码方式使用"><a href="#源码方式使用" class="headerlink" title="源码方式使用"></a>源码方式使用</h2><p><strong>1.</strong> 新建一个运行时小程序项目，将 <code>jsx2mp-runtime</code> 加入项目依赖；</p>
<p><strong>2.</strong> 在 <code>src</code> 目录下新建 <code>miniapp-compiled</code> 文件夹，该文件夹中的组件均采用编译时引擎编译；</p>
<p><strong>3.</strong> 在 <code>src/miniapp-compiled</code> 下新建 <code>index.jsx</code> 文件，将所有编译时组件引入后进行导出。该文件用于收集需要编译的编译时组件。例如，项目结构如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">├── src</span><br><span class="line">│   ├── miniapp-compiled</span><br><span class="line">│   │   ├── CompiledComp1.jsx</span><br><span class="line">│   │   ├── CompiledComp2.jsx</span><br><span class="line">│   │   ├── CompiledComp3</span><br><span class="line">│   │   │   └── index.jsx</span><br><span class="line">│   │   └── index.jsx</span><br><span class="line">│   └── pages</span><br><span class="line">│       └── Home</span><br><span class="line">│           ├── index.css</span><br><span class="line">│           └── index.jsx</span><br></pre></td></tr></table></figure>

<p>则 <code>src/miniapp-compiled/index.jsx</code> 中内容如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> CompiledComp1 <span class="keyword">from</span> <span class="string">'./CompiledComp1'</span>;</span><br><span class="line"><span class="keyword">import</span> CompiledComp2 <span class="keyword">from</span> <span class="string">'./CompiledComp2'</span>;</span><br><span class="line"><span class="keyword">import</span> CompiledComp3 <span class="keyword">from</span> <span class="string">'./CompiledComp3'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">  CompiledComp1,</span><br><span class="line">  CompiledComp2,</span><br><span class="line">  CompiledComp3</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>4.</strong> 正常使用 <code>src/miniapp-compiled</code> 中编写的编译时组件即可。<strong>注意</strong>，引用编译时组件时直接通过其路径引用即可，而不要从 <code>src/miniapp-compiled/index.jsx</code> 引入，即，使用该种方式引入 CompiledComp1 组件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> CompiledComp1 <span class="keyword">from</span> <span class="string">'../miniapp-compiled/CompiledComp1'</span>;</span><br></pre></td></tr></table></figure>

<p>而不要这样引入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; CompiledComp1 &#125; <span class="keyword">from</span> <span class="string">'../miniapp-compiled'</span>;</span><br></pre></td></tr></table></figure>

<h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><ol>
<li>编译时组件仍需遵循 rax 小程序编译时方案的语法约束，详见文档</li>
<li>『在原生微信小程序项目由于每一个传入自定义组件的 props 都必须提前注册，所以在原生项目中使用 Rax 组件的时候，我们做了一定的限制，即 Rax 组件只能响应微信小程序原生项目传入的 outerProps 属性，组件中可以通过 props.outerProps 获取到这个值。』这个在原生小程序中使用 Rax 编译时组件的限制，同样存在于在运行时项目中使用 Rax 编译时组件的场景中</li>
<li>在编译时组件中，无法使用全局状态管理方案，其只拥有从父组件获取 props 执行渲染，并通过事件与父组件通信的能力</li>
<li>编译时组件和运行时项目中存在隔离，其引入的 js 模块不是同一引用</li>
<li>编译时组件在形态上等同于原生自定义组件，因此，其依赖的 npm 包建议用户配置在 nativePackage 中，否则工程会将整个项目的依赖在构建完的小程序代码中再安装一遍，产生大量的 npm 冗余。此时，请务必将 <code>jsx2mp-runtime</code> 加入 <code>nativePackage.dependencies</code> 中，否则组件无法正常工作</li>
<li>在微信小程序中使用时，编译时组件内依赖的 npm 包默认情况下处理方式与原生代码中的 npm 包一致，需要用户自行<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html" target="_blank" rel="noopener">构建 npm</a>。此时可能产生各种问题，例如 npm 包未适配微信构建 npm 包的约束，导致构建失败，以及 npm 包内有不符合微信规范的文件夹命名等。此时用户可在 <code>build.json</code> 中配置 <code>disableCopyNpm: false</code> 来使构建器自动将使用到的 npm 依赖代码拷贝出来，从而无须进行构建 npm 的操作：</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [</span><br><span class="line">    <span class="string">"wechat-miniprogram"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"wechat-miniprogram"</span>: &#123;</span><br><span class="line">    <span class="attr">"disableCopyNpm"</span>: <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>注意，使用此方式时，编译时组件中的依赖无需进行配置到第 5 点中提到的 <code>nativePackage.dependencies</code> 中。如没有其他原生代码使用到 npm 依赖，可以将 <code>nativePackage.autoInstall</code> 设为 <code>false</code>。</p>
<h2 id="npm-形式使用"><a href="#npm-形式使用" class="headerlink" title="npm 形式使用"></a>npm 形式使用</h2><p>Rax 组件工程产出的小程序端组件默认为编译时组件，其可以直接在运行时项目中引入使用。</p>
<p>例如，用户参考小程序组件开发章节开发了一个 Rax 多端（Web + 小程序）组件 rax-test-component 并将其发布至 npm。在运行时项目中，可以直接使用该组件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">import TestComp from &#39;rax-test-component&#39;;</span><br><span class="line"></span><br><span class="line">function Home() &#123;</span><br><span class="line">  return (&lt;TestComp &#x2F;&gt;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在运行时项目中使用 Rax 多端组件，默认使用其编译时实现。此时，你除了需要将该组件添加到 <code>package.json</code> 依赖中，还需要将其添加到 <code>build.json</code> 中 <code>nativePackage.dependencies</code> 字段内（参考小程序工程配置）。</p>
<p>如果需要使用该组件的运行时实现（即 Web 实现），可使用 <code>runtimeDependencies</code> 配置，参考文档小程序工程配置。</p>
<h3 id="注意事项-1"><a href="#注意事项-1" class="headerlink" title="注意事项"></a>注意事项</h3><p>在微信小程序中使用该方式时，需要在 Rax 组件的 <code>package.json</code> 中加入 <code>&quot;miniprogram&quot;: &quot;.&quot;</code> 用以兼容 npm 构建机制。同时，还需要在运行时项目中将 <code>jsx2mp-runtime</code> 添加到 <code>package.json</code> 依赖和 <code>build.json</code> 中 <code>nativePackage.dependencies</code> 字段内（参考小程序工程配置）。同时，编译完成后，用户依然需要在微信 IDE 中进行构建 npm 的操作。</p>
<h1 id="引入原生页面"><a href="#引入原生页面" class="headerlink" title="引入原生页面"></a>引入原生页面</h1><p>在一个 Rax 小程序项目中，用户可直接将使用原生小程序 DSL 开发的页面放置于项目中，并在 app.json 中按照其实际位置书写路径。</p>
<p>例如，现有一个 Rax 小程序项目的目录结构如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">├── build.json</span><br><span class="line">├── package.json</span><br><span class="line">└── src</span><br><span class="line">    ├── app.js</span><br><span class="line">    ├── app.json</span><br><span class="line">    ├── components</span><br><span class="line">    │   └── Logo</span><br><span class="line">    │       ├── index.css</span><br><span class="line">    │       └── index.jsx</span><br><span class="line">    ├── pages</span><br><span class="line">    │   ├── About</span><br><span class="line">    │   │   ├── index.axml</span><br><span class="line">    │   │   ├── index.css</span><br><span class="line">    │   │   ├── index.js</span><br><span class="line">    │   │   └── index.json</span><br><span class="line">    │   └── Home</span><br><span class="line">    │       ├── index.css</span><br><span class="line">    │       └── index.jsx</span><br><span class="line">    └── miniapp-native</span><br><span class="line">        └── List</span><br><span class="line">            ├── index.axml</span><br><span class="line">            ├── index.css</span><br><span class="line">            ├── index.js</span><br><span class="line">            └── index.json</span><br></pre></td></tr></table></figure>

<p>其中，About 页面是采用原生小程序 DSL 开发的页面，则 <code>src/app.json</code> 中如下配置即可：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  &quot;routes&quot;: [</span><br><span class="line">    &#123;</span><br><span class="line">      &quot;path&quot;: &quot;&#x2F;&quot;,</span><br><span class="line">      &quot;source&quot;: &quot;pages&#x2F;Home&#x2F;index&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      &quot;path&quot;: &quot;&#x2F;about&quot;,</span><br><span class="line">      &quot;source&quot;: &quot;pages&#x2F;About&#x2F;index&quot;,</span><br><span class="line">      &quot;targets&quot; [&quot;miniapp&quot;]</span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  &quot;window&quot;: &#123;</span><br><span class="line">    &quot;title&quot;: &quot;Rax App&quot;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h2><ul>
<li>所有原生页面使用到的原生自定义组件（如上面项目中的 List 组件）必须放置于 <code>src/miniapp-native</code> 文件夹中，否则无法使用</li>
<li>如果你的项目不是从原生小程序项目迁移而来，原生小程序页面建议放在 <code>src/miniapp-native</code> 文件夹中，而不是上面 <code>src/pages/About</code> 的做法</li>
<li>如果在 <code>src/pages</code> 下面存在小程序原生页面，必须要在 <code>src/app.json</code> 对应的路由下面加上 <code>targets</code> 字段，从而保证其他端编译的时候不会编译该页面（<code>routes</code> 内每一项中的 <code>targets</code> 用于指定页面需要构建的端，参考基础中的路由方案章节）</li>
<li>对于原生自定义组件或者原生页面中使用到的 npm 包，支持用户在 build.json 中进行使用 <code>nativePackage</code> 字段进行配置，详见小程序工程配置。</li>
</ul>
<h1 id="原生-app-js"><a href="#原生-app-js" class="headerlink" title="原生 app.js"></a>原生 app.js</h1><p>在运行时方案中，自 <code>miniapp-render</code> v2.7.0 开始，用户在 <code>runApp</code> 中编写的 app 的生命周期将全部与小程序原生的 App 生命周期对齐。因此当用户需要在 app 实例上挂载一些变量时，可以直接在 <code>runApp</code> 函数中进行：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/app.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; runApp &#125; <span class="keyword">from</span> <span class="string">'rax-app'</span>;</span><br><span class="line">runApp(&#123;</span><br><span class="line">  app: &#123;</span><br><span class="line">    onLaunch() &#123;</span><br><span class="line">      <span class="keyword">this</span>.__age = <span class="number">20</span>; <span class="comment">// this 即为 app 实例，可直接挂载变量</span></span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'on launch'</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    onShow() &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'on show'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>如果用户需要在 app 上挂载变量、添加生命周期方法（更建议采用以上在 <code>runApp</code> 中配置的方式）或者劫持 Page 方法等其他操作时，可以采取如下方式：</p>
<p>在 <code>src/miniapp-native</code> 中新建 <code>app.js</code>，在其中可以随意编写业务逻辑，但要求该文件必须使用 <code>module.exports</code> 导出一个 App 的配置对象，代码示例如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'我是自主编写的业务逻辑'</span>);</span><br><span class="line"><span class="keyword">const</span> originalPage = Page;</span><br><span class="line">Page = <span class="function"><span class="keyword">function</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'Page 已被劫持'</span>);</span><br><span class="line">  originalPage(options);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> nativeAppConfig = &#123;</span><br><span class="line">  __age: <span class="number">20</span>,</span><br><span class="line">  onLaunch() &#123; </span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'on launch'</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  onShow() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'on show'</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">module</span>.exports = nativeAppConfig;</span><br></pre></td></tr></table></figure>

<p>用户导出的 App 配置对象将被 merge 到最终的产物中并执行生命周期等。</p>
<h1 id="分包加载"><a href="#分包加载" class="headerlink" title="分包加载"></a>分包加载</h1><p>Rax 支持使用小程序的<a href="https://opendocs.alipay.com/mini/framework/subpackages" target="_blank" rel="noopener">分包加载</a>能力，但在配置上与原生小程序存在差异。以下进行具体说明。</p>
<h2 id="分包加载目录结构"><a href="#分包加载目录结构" class="headerlink" title="分包加载目录结构"></a>分包加载目录结构</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">src</span><br><span class="line">└── pages</span><br><span class="line">│   ├── Home               &#x2F;&#x2F; 主包</span><br><span class="line">│   │   ├── Foo</span><br><span class="line">│   │   ├── Bar</span><br><span class="line">│   │   ├── models</span><br><span class="line">│   │   │   ├── Foo.ts</span><br><span class="line">│   │   │   └── Bar.ts</span><br><span class="line">│   │   ├── store.ts</span><br><span class="line">│   │   ├── app.json</span><br><span class="line">│   │   └── app.ts</span><br><span class="line">│   ├── About             &#x2F;&#x2F; 子包</span><br><span class="line">│   │   ├── pages&#x2F;index.ts</span><br><span class="line">│   │   └── app.ts</span><br><span class="line">│   │   └── app.json</span><br><span class="line">│----app.json</span><br><span class="line">│----app.js</span><br></pre></td></tr></table></figure>

<p>开启分包加载需要在 <code>build.json</code> 中进行配置，如下所示：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [<span class="string">"miniapp"</span>],</span><br><span class="line">  <span class="attr">"miniapp"</span>: &#123;</span><br><span class="line">    <span class="attr">"subPackages"</span>: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>分包加载入口设置：</p>
<p>开启分包加载后，<code>src/app.js</code> 失效，用户需要在主包根目录下的 app.js 中编写业务逻辑。<code>src/app.json</code> 中的 <code>routes</code> 变更为配置各个分包的入口，例如：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"routes"</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">"source"</span>: <span class="string">"pages/Home/app"</span>,</span><br><span class="line">      <span class="attr">"miniappMain"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">"source"</span>: <span class="string">"pages/About/app"</span></span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"window"</span>: &#123;</span><br><span class="line">    <span class="attr">"title"</span>: <span class="string">"Rax app"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"tabBar"</span>: &#123;</span><br><span class="line">    <span class="attr">"textColor"</span>: <span class="string">"#999"</span>,</span><br><span class="line">    <span class="attr">"selectedColor"</span>: <span class="string">"#666"</span>,</span><br><span class="line">    <span class="attr">"backgroundColor"</span>: <span class="string">"#f8f8f8"</span>,</span><br><span class="line">    <span class="attr">"items"</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">"text"</span>: <span class="string">"首页"</span>,</span><br><span class="line">        <span class="attr">"pagePath"</span>: <span class="string">"pages/Home/models/Foo"</span>,</span><br><span class="line">        <span class="attr">"icon"</span>: <span class="string">"https://gw.alicdn.com/tfs/TB1vGsVqiDsXe8jSZR0XXXK6FXa-200-200.png"</span>,</span><br><span class="line">        <span class="attr">"activeIcon"</span>: <span class="string">"https://gw.alicdn.com/tfs/TB1EBamvz39YK4jSZPcXXXrUFXa-200-200.png"</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">"text"</span>: <span class="string">"关于"</span>,</span><br><span class="line">        <span class="attr">"pagePath"</span>: <span class="string">"pages/Home/models/Bar"</span>,</span><br><span class="line">        <span class="attr">"icon"</span>: <span class="string">"https://gw.alicdn.com/tfs/TB1PceUq5pE_u4jSZKbXXbCUVXa-200-200.png"</span>,</span><br><span class="line">        <span class="attr">"activeIcon"</span>: <span class="string">"https://gw.alicdn.com/tfs/TB1BZTsqmslXu8jSZFuXXXg7FXa-200-200.png"</span></span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ol>
<li><code>miniappMain</code> 字段用于指定主包</li>
<li>tabBar.items 中每一项的路径需要用 pagePath 来指定具体路径，原有的通过 pageName 配置的方式失效</li>
<li>在编译时中，只有主包的 app.js 会生效，其他分包的 app.js 无效；在运行时中，所有分包的 app.js 代码都会生效，但子包的 app.js 中 <code>runApp</code> 注册的 app 级别的生命周期事件不会生效</li>
</ol>
<p>各分包入口代码：</p>
<p>各个分包下必须创建一个 app.js 作为入口，其写法和原先的 <code>src/app.js</code> 一致。app.js 中必须引入 app.json 并执行 runApp:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">import &#123; runApp &#125; from 'rax-app';</span><br><span class="line"><span class="comment">// 引入 app.json</span></span><br><span class="line">import staticConfig from './app.json';</span><br><span class="line"></span><br><span class="line">runApp(&#123;</span><br><span class="line">  app: &#123;</span><br><span class="line">    onShow() &#123;</span><br><span class="line">      console.log('app show...');</span><br><span class="line">    &#125;,</span><br><span class="line">    onHide() &#123;</span><br><span class="line">      console.log('app hide...');</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;, staticConfig);</span><br></pre></td></tr></table></figure>

<p>各分包配置：</p>
<p>各个分包根目录下必须存放 <code>app.json</code>，其配置方式与常规的应用配置方式一致。除此之外，小程序上分包加载的 <code>preloadRule</code> 需要去具体的路径下配置，对应字段名为 <code>miniappPreloadRule</code>，例如：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"routes"</span>: [&#123;</span><br><span class="line">    <span class="attr">"path"</span>: <span class="string">"/about"</span>,</span><br><span class="line">    <span class="attr">"source"</span>: <span class="string">"pages/index"</span>,</span><br><span class="line">    <span class="attr">"miniappPreloadRule"</span>: &#123;</span><br><span class="line">      <span class="attr">"network"</span>: <span class="string">"wifi"</span>,</span><br><span class="line">      <span class="attr">"packages"</span>: [<span class="string">"pages/About"</span>] </span><br><span class="line">    &#125;</span><br><span class="line">  &#125;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>说明：</p>
<ol>
<li>配置 <code>source</code> 时，以当前分包的 <code>app.js</code> 作为基准路径</li>
<li><code>miniappPreloadRule.packages</code> 中需要填入的分包名对应用户在 <code>src/app.json</code> 中配置的分包的 app.js 所在目录</li>
</ol>
<p>在分包中使用小程序插件或原生组件：</p>
<p>默认情况下，在 <code>src/app.json</code> 中配置了 <code>plugins</code> 字段，将在主包中引入所有配置的插件；在 <code>src/miniapp-native</code> 中引入的原生小程序组件，也会在编译后存放于主包中。两种情况均会占用主包体积。如果一个小程序插件或者原生自定义组件仅在某个分包中使用，则可以按照以下方式配置，确保其仅占用所在子包的体积：</p>
<ul>
<li>仅在某个子包中使用小程序插件：在子包根目录下的 <code>app.json</code> 中配置 <code>plugins</code> 字段，并确保只在该子包的代码中引用插件；</li>
<li>仅在某个子包中使用小程序原生组件：在子包根目录下新建 <code>miniapp-native</code> 文件夹并存放原生小程序组件，并确保只在该子包的代码中引用原生小程序组件。</li>
</ul>
<p>注意：</p>
<ul>
<li>上述第二点对主包不适用。仅在主包中使用的小程序原生组件请放置于 <code>src/miniapp-native</code> 中，<strong>不要</strong>在主包根目录下新建 <code>miniapp-native</code> 文件夹。</li>
<li>多个子包之间均会使用到的小程序插件和原生组件，仍然需要放置于主包中。</li>
</ul>
<p>分包之间公共模块抽取：</p>
<p>在 rax-app v3.4.11 版本之后，被 2 个及以上分包使用的公共模块将被抽取到主包中作为公共模块使用，从而有效降低分包体积。建议在非必要的情况下，<strong>尽量减少</strong>主包的业务代码，从而保证主包体积不受公共模块体积影响。</p>
<p>开发者可以在 build.json 中一键关闭这个功能：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"vendor"</span>: <span class="literal">false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>分包之间共享内存：</p>
<p>如果需要在分包之间共享运行时内存，可以在 <code>build.json</code> 中进行配置，如下所示：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [<span class="string">"miniapp"</span>],</span><br><span class="line">  <span class="attr">"miniapp"</span>: &#123;</span><br><span class="line">    <span class="attr">"subPackages"</span>: &#123;</span><br><span class="line">      <span class="attr">"shareMemory"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>开启之后分包之间所有的公共模块将变成<strong>单例</strong>，即共享同一引用，此时分包之间的 <code>window</code> 也将<strong>变成同一引用</strong>。在启用该功能时，请务必保证 <code>vendor</code> 没有被设置成 <code>false</code>。</p>
<p>另：如果使用到 rax-view 在微信小程序端的 appear 相关事件的能力，请在分包时务必开启共享内存，否则在分包中 appear 事件将无法触发。</p>
<p>微信小程序分包下构建 npm：</p>
<p>微信小程序支持分包下各自构建 npm，以减轻主包的体积压力（详见<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#Tips" target="_blank" rel="noopener">文档</a>）。Rax 也支持这一能力，此时需要用户在 <code>build.json</code> 的 <code>nativePackage</code> 中增加 <code>subPackages</code> 字段，配置说明如下：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [</span><br><span class="line">    <span class="string">"wechat-miniprogram"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"wechat-miniprogram"</span>: &#123;</span><br><span class="line">    <span class="attr">"subPackages"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">"nativePackage"</span>: &#123;</span><br><span class="line">      <span class="attr">"autoInstall"</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 主包安装依赖</span></span><br><span class="line">      <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">        <span class="attr">"axios"</span>: <span class="string">"*"</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 其他子包安装依赖</span></span><br><span class="line">      <span class="attr">"subPackages"</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// source 对应子包入口，与 src/app.json 中配置一致</span></span><br><span class="line">          <span class="attr">"source"</span>: <span class="string">"pages/About/app"</span>,</span><br><span class="line">          <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">            <span class="attr">"jquery"</span>: <span class="string">"*"</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">"source"</span>: <span class="string">"pages/Profile/app"</span>,</span><br><span class="line">          <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">            <span class="attr">"lodash"</span>: <span class="string">"*"</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>其他注意事项：</p>
<ul>
<li>仅支持微信小程序的常规分包能力，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html" target="_blank" rel="noopener">独立分包</a>暂不支持</li>
<li>开启分包加载后，页面间无法通过 history 进行页面间跳转，需要使用小程序路由相关 API（navigateTo 等） 或者 universal-navigate 处理路由</li>
</ul>
<h1 id="原生小程序工程配置"><a href="#原生小程序工程配置" class="headerlink" title="原生小程序工程配置"></a>原生小程序工程配置</h1><p>各个小程序端均存在自己的项目工程配置，存放于一个单独的 json 文件中，对应名称如下：</p>
<ul>
<li>微信小程序：<code>project.config.json</code></li>
<li>阿里小程序：<code>mini.project.json</code></li>
</ul>
<p>在 Rax 工程中，你可以使用 <code>build.json</code> 中的 <code>nativeConfig</code> 字段（参考小程序工程配置章节）来进行对应的配置。编译完成后，配置文件会被写入对应产物的文件夹中。</p>
<p>此外，针对一些平台，还会有一些特殊的限制：</p>
<p>微信小程序目前要求用户在 <code>project.config.json</code> 中必须填写 <code>appid</code>，否则 IDE 无法正常编译预览。因此建议用户在 <code>nativeConfig</code> 中进行配置，或者在使用 IDE 打开项目时填入测试号。</p>
<p><img src="/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01E4U8DB1oD4FkWX7uI_!!6000000005190-2-tps-1260-636.png" alt="img"></p>
<h1 id="插件开发与使用"><a href="#插件开发与使用" class="headerlink" title="插件开发与使用"></a>插件开发与使用</h1><h2 id="插件开发"><a href="#插件开发" class="headerlink" title="插件开发"></a>插件开发</h2><p>Rax 小程序目前已支持阿里和微信双端的插件开发，使用 Rax CLI 初始化项目时，按照提示项目类型选择 Plugin 即可：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">? What&#39;s your project type?</span><br><span class="line">  App (Build universal application)</span><br><span class="line">  Component (Build universal component)</span><br><span class="line">  API (Build universal API library)</span><br><span class="line">❯ Plugin (Build plugin for miniapp)</span><br></pre></td></tr></table></figure>

<p>目前插件开发同样支持编译时和运行时两种方案。编译时支持开发页面、自定义组件及 JS 接口，运行时则只支持开发页面：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">? What&#39;s your plugin build type for miniapp ? (Use arrow keys)</span><br><span class="line">❯ compile mode (high performance, support page&#x2F;component&#x2F;js api)</span><br><span class="line">  runtime mode (with no syntax constraints, support page)</span><br></pre></td></tr></table></figure>

<p>目前插件项目默认使用编译时方案，如果在生成项目后需要修改为运行时，需要在 build.json 中配置对应端的 <code>buildType</code>，例如：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [<span class="string">"miniapp"</span>],</span><br><span class="line">  <span class="attr">"miniapp"</span>: &#123;</span><br><span class="line">    <span class="attr">"buildType"</span>: <span class="string">"runtime"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>插件配置文件：</p>
<p><code>src/plugin.json</code> 中可配置 publicComponents/publicPages/pages/main 四个属性（注意，运行时方案不支持配置 publicComponents 及 main）。其中前三者均为 <code>object</code> 类型，必须设置 key/value。其具体含义可参考下方对应端的文档：</p>
<ul>
<li><a href="https://opendocs.alipay.com/mini/plugin/plugin-development" target="_blank" rel="noopener">阿里小程序插件开发文档</a></li>
<li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html" target="_blank" rel="noopener">微信小程序插件开发文档</a></li>
</ul>
<p>开发：</p>
<p>执行命令 <code>npm run start</code>，插件代码即可被编译输出至 demo 文件夹下的对应位置并启动代码 watch 模式。用户根据生成端的不同使用小程序 IDE 打开 <code>demo/${target}</code> 即可查看。</p>
<p>注意：当用户修改了插件中页面、自定义组件或者 JS 接口时，需要在 <code>demo/${target}/client</code> 的小程序容器代码中修改对于插件的调用方式，否则无法正常使用插件。</p>
<p>打包：</p>
<p>执行命令 <code>npm run build</code>，插件代码即可被编译输出至 <code>demo/${target}</code> 目录下，按照阿里（支付宝、手淘等）、微信对应的插件发布文档发布即可。</p>
<p>限制：</p>
<p>编译时方案微信小程序插件样式问题：</p>
<p>由于微信端插件无法进行样式污染，如果用户在页面或者自定义组件中使用到 rax-view 组件，需要自行在对应的 wxss 中添加以下样式：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.__rax-view</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span> solid black;</span><br><span class="line">  <span class="attribute">display</span>:flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>:column;</span><br><span class="line">  <span class="attribute">align-content</span>:flex-start;</span><br><span class="line">  <span class="attribute">flex-shrink</span>:<span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>:border-box;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>该问题我们将在未来解决。</p>
<p>运行时方案处理页面生命周期及事件：</p>
<p>在 Rax 小程序应用中，我们按照页面生命周期及事件处理文档中的说明，从 rax-app 中使用 <code>registerNativeEventListeners</code>, <code>addNativeEventListener</code> 和 <code>removeNativeEventListener</code>。但是 rax-app 是应用框架，在小程序插件中无法引入使用。为此，我们提供了 miniapp-lifecycles 包以解决这个问题，除引入包发生变更外，上述三个方法的使用方式并无变化，示例如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createElement, useEffect &#125; <span class="keyword">from</span> <span class="string">'rax'</span>;</span><br><span class="line"><span class="keyword">import</span> View <span class="keyword">from</span> <span class="string">'rax-view'</span>;</span><br><span class="line"><span class="keyword">import</span> Text <span class="keyword">from</span> <span class="string">'rax-text'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; isMiniApp &#125; <span class="keyword">from</span> <span class="string">'universal-env'</span>; </span><br><span class="line"><span class="keyword">import</span> &#123; registerNativeEventListeners, addNativeEventListener, removeNativeEventListener &#125; <span class="keyword">from</span> <span class="string">'miniapp-lifecycles'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Index</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handlePageReachBottom</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  useEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span>(isMiniApp) &#123;</span><br><span class="line">      <span class="comment">// 开始监听 onReachBottom 事件</span></span><br><span class="line">      addNativeEventListener(<span class="string">'onReachBottom'</span>, handlePageReachBottom);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (isMiniApp) &#123;</span><br><span class="line">      <span class="comment">// 移除onReachBottom 事件的监听器</span></span><br><span class="line">      removeNativeEventListener(<span class="string">'onReachBottom'</span>, handlePageReachBottom);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;&#125;, []);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View&gt;</span><br><span class="line">      &lt;Text&gt;<span class="number">1</span>&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (isMiniApp) &#123;</span><br><span class="line">  registerNativeEventListeners(Index, [<span class="string">'onReachBottom'</span>]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Index;</span><br></pre></td></tr></table></figure>

<h3 id="注意事项-2"><a href="#注意事项-2" class="headerlink" title="注意事项"></a>注意事项</h3><ul>
<li>插件中不支持使用 <code>getApp</code> 等方法的限制仍然存在，详情请参考各个小程序端的官方文档。</li>
<li>由于微信小程序基础库低版本存在 bug，使用运行时方案开发微信小程序插件并打开 IDE 预览时，请确保使用最新的调试基础库（详情-本地设置-调试基础库版本选择）。</li>
</ul>
<h2 id="插件使用"><a href="#插件使用" class="headerlink" title="插件使用"></a>插件使用</h2><p>插件配置:</p>
<p>在 <code>src/app.json</code> 配置 <code>plugins</code> 参数，和支付宝、微信原生的插件配置保持一致</p>
<p>插件组件使用:</p>
<p>使用插件的组件时，直接使用 import 语法，例如 <code>import PluginComponent from &#39;plugin://myPlugin/myComp&#39;;</code> 然后在 JSX 中正常使用 PluginComponent 标签即可</p>
<p>插件页面使用:</p>
<p>使用插件页面，跳转可使用 @uni/navigate 或 rax-link，直接写具体插件页面路径即可</p>
<p>插件 JS API 使用：</p>
<p>使用插件 js 接口，无限制，使用 <code>requirePlugin(&#39;myPlugin&#39;)</code> 然后调用即可，和阿里、微信小程序官方使用方式保持一致</p>
<p>多端开发注意：</p>
<p>当开发多端时，<code>import PluginComponent from &#39;plugin://myPlugin/myComp&#39;;</code>这样的语法在非小程序端将无法识别，目前工程上能确保项目能正常启动，但是 Web 端无法正常运行。同时，针对微信端开发的插件也无法在阿里小程序中使用。此时可按照后缀名加载对应端的文件以解决该问题，具体可参考 FAQ 章节第 2 点答疑。</p>
<h1 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h1><p>局部场景引入编译时组件（双引擎结合）：</p>
<p>在局部性能要求较高的场景下（例如长列表），将部分组件（例如长列表中的循环项）采用编译时方案开发，是一个可选的优化方案，使用方式详见使用编译时组件章节。</p>
<p>代码逻辑优化：</p>
<p>在开发 Rax 小程序时，代码层面的逻辑优化依然有效，例如使用 <code>shouldComponentUpdate</code> 以及 <code>memo</code> 等以减少不必要的子组件的重复渲染。因此，请保持开发 Web 应用时良好的代码优化习惯。</p>
<p>高频组件分级：</p>
<p>针对 view/image/text 等高频使用的组件，Rax 会在运行时根据其是否绑定 props、events 为其自动分级，以映射到对应的模板上，减少无用的 props、events 绑定，提升交互性能。因此，开发者在编写代码时请注意只为该类组件绑定必需的 props 和 events。</p>
<p>模板属性及事件配置：</p>
<p>在运行时方案中，我们会遍历所有内置组件，并将其输出至模板文件中，在小程序运行起来后根据实时的 setData 的数据递归迭代模板以生成完整的 DOM 结构。因此组件的 template 会预先绑定上所有的事件和属性，根据运行时的数据来进行属性传递和事件触发。但是，对于开发者来说，一个项目不太可能用到所有组件的所有属性和事件。而有些事件和属性的存在会一定程度上影响小程序的渲染和交互性能。因此，我们支持让开发者通过一定的配置，去剔除掉一些组件 template 上未曾用到的属性或者事件。此外，出于减小体积考虑，我们也支持用户直接删除整个项目中没有使用到的组件模板。</p>
<p>删除组件属性及事件：</p>
<p>具体配置方式为：在 build.json 中各个小程序端的配置内，添加 “template” 字段，示例如下：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [</span><br><span class="line">    <span class="string">"wechat-miniprogram"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"wechat-miniprogram"</span>: &#123;</span><br><span class="line">    <span class="attr">"template"</span>: &#123;</span><br><span class="line">      <span class="attr">"view"</span>: &#123;</span><br><span class="line">        <span class="attr">"delete"</span>: &#123;</span><br><span class="line">          <span class="attr">"props"</span>: [<span class="string">"hover-class"</span>, <span class="string">"role"</span>],</span><br><span class="line">          <span class="attr">"events"</span>: [<span class="string">"TransitionEnd"</span>, <span class="string">"FirstAppear"</span>, <span class="string">"TouchMove"</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">"cover-view"</span>: &#123;</span><br><span class="line">        <span class="attr">"delete"</span>: &#123;</span><br><span class="line">          <span class="attr">"props"</span>: [<span class="string">"scroll-top"</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在 “template” 字段中，key 为需要配置的<strong>小程序内置组件（非 rax 基础组件）</strong>名称，值为具体配置。对于删除操作，可处理以下两种类型：</p>
<ol>
<li>props： 即组件属性，遵照小程序官网文档命名进行配置</li>
<li>events: 即组件自身独有的事件，命名需要去除事件前缀（即阿里小程序的 <code>on</code> 以及微信小程序的 <code>bind</code> 等）同时遵循大驼峰式命名法，即每个单字的首字母均需大写</li>
</ol>
<p>注意，该配置方式与上述高频组件分级的优化并不冲突。你依然可以配置删除高频组件上的 props 和 events。但一般情况下不需要再针对高频组件做处理。</p>
<p>增加组件属性：</p>
<p>目前，我们也支持用户自定义增加组件 template 上的属性，以防止 Rax 小程序的组件 template 更新不及时或者有一些各个小程序端的私有属性无法使用。具体配置方式示例如下：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [</span><br><span class="line">    <span class="string">"miniapp"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"miniapp"</span>: &#123;</span><br><span class="line">    <span class="attr">"template"</span>: &#123;</span><br><span class="line">      <span class="attr">"cover-view"</span>: &#123;</span><br><span class="line">        <span class="attr">"add"</span>: &#123;</span><br><span class="line">          <span class="attr">"props"</span>: [</span><br><span class="line">            &#123; <span class="attr">"name"</span>: <span class="string">"test1"</span>, <span class="attr">"default"</span>: <span class="string">"123"</span> &#125;, </span><br><span class="line">            &#123; <span class="attr">"name"</span>: <span class="string">"test2"</span>, <span class="attr">"default"</span>: <span class="number">123</span> &#125;</span><br><span class="line">            &#123; <span class="attr">"name"</span>: <span class="string">"test3"</span>, <span class="attr">"default"</span>: <span class="literal">false</span> &#125;</span><br><span class="line">          ]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在 “template” 字段中，key 为需要配置的<strong>小程序内置组件（非 rax 基础组件）</strong>名称，值为具体配置。对于添加操作，目前仅支持添加 props，即组件属性。 props 中每一项的 <code>name</code> 表示属性名，<code>default</code> 表示该属性的默认值，如没有默认值可以不填。</p>
<p>删除无用组件 template</p>
<p>Rax 小程序目前默认会在 template 中配置所有原生小程序内置组件，使得项目初始体积较大。目前我们提供了 <code>template</code> 下的 <code>delete</code> 配置，供用户进行进阶式删减组件操作，减小 template 体积。注意，删除 template 后的组件将无法在项目中使用。示例如下：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [</span><br><span class="line">    <span class="string">"miniapp"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"miniapp"</span>: &#123;</span><br><span class="line">    <span class="attr">"template"</span>: &#123;</span><br><span class="line">      <span class="attr">"delete"</span>: [<span class="string">"canvas"</span>, <span class="string">"progress"</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>上述配置会将 template 中的 canvas 和 progress 两个组件的模板删除。</p>
<h1 id="小程序一体化"><a href="#小程序一体化" class="headerlink" title="小程序一体化"></a>小程序一体化</h1><p>小程序一体化是 <a href="https://www.midwayjs.org/" target="_blank" rel="noopener">Midway.js</a> 团队与 Rax 团队合作的产品，通过 Midway.js 对一体化的支持与 Rax 对小程序的支持，我们可以为小程序带去更好的研发体验。</p>
<p>通过 Rax CLI 可快速完成小程序一体化项目的创建：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm init rax</span><br></pre></td></tr></table></figure>

<p>选择 App -&gt; 小程序云开发一体化应用即可。</p>
<blockquote>
<p>以微信小程序开发为例</p>
</blockquote>
<p>项目创建完成后，进入项目根目录。</p>
<p>配置 AppId 小程序的运行与预览依赖于 AppId（<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7" target="_blank" rel="noopener">获取方式</a>），获取到后，你可以将 AppId 配置在 build.json 中对应端的 <code>nativeConfig</code> 中：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"targets"</span>: [</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"plugins"</span>: [</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"wechat-miniprogram"</span>: &#123;</span><br><span class="line">    <span class="attr">"nativeConfig"</span>: &#123;</span><br><span class="line">      <span class="attr">"appid"</span>: <span class="string">"&lt;你的 AppID&gt;"</span>,</span><br><span class="line">      <span class="attr">"name"</span>: <span class="string">"nativeConfig 是用户配置 project.config.json 的地方"</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>本地启动：</p>
<p>运行如下命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm start</span><br></pre></td></tr></table></figure>

<p>本地服务启动后将输出以下日志：</p>
<p><img src="/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN011tJwWL1JgbjzafvLy_!!6000000001058-2-tps-981-326.png" alt="img"></p>
<p>目录结构如下:</p>
<p>整体目录结构如下：</p>
<ul>
<li>src：前端开发目录</li>
<li>src/cloud：云开发目录</li>
<li>src/cloud/functions：云函数目录</li>
</ul>
<p><img src="/../../image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01wjvOdw1Dxen4lhCWL_!!6000000000283-2-tps-1504-744.png" alt="img"></p>
<p>使用小程序开发工具预览:</p>
<p>打开微信小程序开发者工具，选择导入项目，按照上方编译完毕后命令行的提示打开 『&lt;项目根目录&gt;/build/wechat-miniprogram』:</p>
<p><img src="/../../image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01p5yWTF1sL5gLI6oZk_!!6000000005749-2-tps-1708-909.png" alt="img"></p>
<p>你可以在此处预览项目，并进行函数的部署与发布工作。</p>
<h3 id="开发函数"><a href="#开发函数" class="headerlink" title="开发函数"></a>开发函数</h3><p>使用 Midway Hooks 可以方便的开发云函数。</p>
<p>以获取 OpenId 为例。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> getOpenId = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> wechatContext = cloud.getWXContext();</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    openId: wechatContext.OPENID,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>前端调用代码（需要提前安装 rax-use-async-effect 依赖）</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createElement, useState &#125; <span class="keyword">from</span> <span class="string">'rax'</span>;</span><br><span class="line"><span class="keyword">import</span> useAsyncEffect <span class="keyword">from</span> <span class="string">'rax-use-async-effect'</span>;</span><br><span class="line"><span class="keyword">import</span> View <span class="keyword">from</span> <span class="string">'rax-view'</span>;</span><br><span class="line"><span class="keyword">import</span> Text <span class="keyword">from</span> <span class="string">'rax-text'</span>;</span><br><span class="line"><span class="keyword">import</span> styles <span class="keyword">from</span> <span class="string">'./index.module.css'</span>;</span><br><span class="line"><span class="keyword">import</span> Logo <span class="keyword">from</span> <span class="string">'../../components/Logo'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; hello, getOpenId &#125; <span class="keyword">from</span> <span class="string">'@/cloud/function'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">Home</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [message, setMessage] = useState(<span class="string">''</span>);</span><br><span class="line">  <span class="keyword">const</span> [openId, setOpenId] = useState(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line">  useAsyncEffect(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> message = <span class="keyword">await</span> hello(<span class="string">'Rax'</span>, <span class="string">'Midway.js'</span>);</span><br><span class="line">    setMessage(message);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> &#123; openId &#125; = <span class="keyword">await</span> getOpenId();</span><br><span class="line">    setOpenId(<span class="string">`<span class="subst">$&#123;openId!.substring(<span class="number">0</span>, <span class="number">3</span>) &#125;</span>***************<span class="subst">$&#123; openId!.substring(<span class="number">14</span>)&#125;</span>`</span>);</span><br><span class="line">  &#125;, []);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View className=&#123;styles.homeContainer&#125;&gt;</span><br><span class="line">      &lt;Logo uri=<span class="string">"//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png"</span> /&gt;</span><br><span class="line">      &lt;Text className=&#123;styles.homeTitle&#125;&gt;Welcome to Your Rax App&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">      &lt;Text className=&#123;styles.homeInfo&#125;&gt;Message: &#123;message&#125;&lt;/</span>Text&gt;</span><br><span class="line">      &lt;Text className=&#123;styles.homeInfo&#125;&gt;OpenId: &#123;openId&#125;&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Midway Hooks 相关的语法和文档可参考<a href="https://www.yuque.com/midwayjs/midway_v2/hooks_intro" target="_blank" rel="noopener">这里</a>。</p>
<h3 id="函数部署"><a href="#函数部署" class="headerlink" title="函数部署"></a>函数部署</h3><p>云开发的函数需要部署后才能调用，你可以在生成的 cloudfunctions 目录下，通过右键点击上传部署函数。</p>
<p><img src="/../../image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN01BtOvXs2ALhIA1nL5B_!!6000000008187-2-tps-611-220.png" alt="img"></p>
<p>部署完成后重新编译项目即可查看函数运行结果，更多的云开发指导，可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html" target="_blank" rel="noopener">微信官方文档</a>。</p>
<h3 id="本地调试"><a href="#本地调试" class="headerlink" title="本地调试"></a>本地调试</h3><p>你可以方便的通过小程序开发工具来进行函数调试，如下图所示。</p>
<p><img src="/../../image/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/O1CN011zCh3C1fSKwiHyaQ9_!!6000000004005-2-tps-1504-682.png" alt="img"></p>
<p>参考文档：<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/debug.html#%E4%BA%91%E5%87%BD%E6%95%B0%E6%9C%AC%E5%9C%B0%E8%B0%83%E8%AF%95" target="_blank" rel="noopener">云函数本地调试</a></p>
<h2 id="项目部署"><a href="#项目部署" class="headerlink" title="项目部署"></a>项目部署</h2><p>在完成开发后，即可开始发布小程序，后续参考云开发平台的发布文档即可。</p>

    </div>
    
    
    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
        <div class="reward-container">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/alipay.png" alt="Li Yudong 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>Li Yudong
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="http://example.com/2021/11/26/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88%E5%88%9D%E5%AD%A6/Rax%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BF%9B%E9%98%B6/" title="Rax小程序进阶">http://example.com/2021/11/26/盒马技术栈初学/Rax小程序进阶/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

    
      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%85%AC%E5%8F%B8%E6%8A%80%E6%9C%AF%E6%A0%88/" rel="tag"># 公司技术栈</a>
          </div>
    
        

    
        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/11/26/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88%E5%88%9D%E5%AD%A6/Rax%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91/" rel="prev" title="Rax组件开发">
      <i class="fa fa-chevron-left"></i> Rax组件开发
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/11/30/%E7%9B%92%E9%A9%AC%E6%8A%80%E6%9C%AF%E6%A0%88%E5%88%9D%E5%AD%A6/Mobx%E8%BF%9B%E9%98%B6/" rel="next" title="Mobx进阶">
      Mobx进阶 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#状态管理"><span class="nav-number">1.</span> <span class="nav-text">状态管理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#全局状态"><span class="nav-number">1.1.</span> <span class="nav-text">全局状态</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#定义模型"><span class="nav-number">1.1.1.</span> <span class="nav-text">定义模型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建-Store-实例"><span class="nav-number">1.1.2.</span> <span class="nav-text">创建 Store 实例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-View-中使用状态"><span class="nav-number">1.1.3.</span> <span class="nav-text">在 View 中使用状态</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#模型规范"><span class="nav-number">1.2.</span> <span class="nav-text">模型规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#API"><span class="nav-number">1.3.</span> <span class="nav-text">API</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#类型提示"><span class="nav-number">1.4.</span> <span class="nav-text">类型提示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#设置初始状态"><span class="nav-number">1.5.</span> <span class="nav-text">设置初始状态</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#使用编译时组件"><span class="nav-number">2.</span> <span class="nav-text">使用编译时组件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#源码方式使用"><span class="nav-number">2.1.</span> <span class="nav-text">源码方式使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#注意事项"><span class="nav-number">2.1.1.</span> <span class="nav-text">注意事项</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npm-形式使用"><span class="nav-number">2.2.</span> <span class="nav-text">npm 形式使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#注意事项-1"><span class="nav-number">2.2.1.</span> <span class="nav-text">注意事项</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#引入原生页面"><span class="nav-number">3.</span> <span class="nav-text">引入原生页面</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#注意"><span class="nav-number">3.1.</span> <span class="nav-text">注意</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#原生-app-js"><span class="nav-number">4.</span> <span class="nav-text">原生 app.js</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#分包加载"><span class="nav-number">5.</span> <span class="nav-text">分包加载</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#分包加载目录结构"><span class="nav-number">5.1.</span> <span class="nav-text">分包加载目录结构</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#原生小程序工程配置"><span class="nav-number">6.</span> <span class="nav-text">原生小程序工程配置</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#插件开发与使用"><span class="nav-number">7.</span> <span class="nav-text">插件开发与使用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#插件开发"><span class="nav-number">7.1.</span> <span class="nav-text">插件开发</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#注意事项-2"><span class="nav-number">7.1.1.</span> <span class="nav-text">注意事项</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#插件使用"><span class="nav-number">7.2.</span> <span class="nav-text">插件使用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#性能优化"><span class="nav-number">8.</span> <span class="nav-text">性能优化</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#小程序一体化"><span class="nav-number">9.</span> <span class="nav-text">小程序一体化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#开发函数"><span class="nav-number">9.0.1.</span> <span class="nav-text">开发函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数部署"><span class="nav-number">9.0.2.</span> <span class="nav-text">函数部署</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#本地调试"><span class="nav-number">9.0.3.</span> <span class="nav-text">本地调试</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#项目部署"><span class="nav-number">9.1.</span> <span class="nav-text">项目部署</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Li Yudong"
      src="/images/author.jpg">
  <p class="site-author-name" itemprop="name">Li Yudong</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">95</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/tiarmor1" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;tiarmor1" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:1157019137@qq.com" title="E-Mail → mailto:1157019137@qq.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 2020 – 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Li Yudong</span>
</div>

        








      </div>
    </footer>
  </div>

  
  
  <script color='0,0,0' opacity='0.5' zIndex='-1' count='150' src="/lib1/canvas-nest/canvas-nest.min.js"></script>
  <script src="/lib1/anime.min.js"></script>
  <script src="/lib1/velocity/velocity.min.js"></script>
  <script src="/lib1/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

  
   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
   <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
   <script type="text/javascript" src="/js/fireworks.js"></script>
  
</body>
</html>

